<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }


    </style>
</head>
<body>

<div class="box1" id="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<script>

    var box1 = document.getElementById("box1");
    var box2 = box1.children[0];
    var box3 = box2.children[0];

//    冒泡和捕获
//    box1.onclick = function () {
//        alert("我是box1");
//    }
// 
//    box2.onclick = function () {
//        alert("我是box2");
//    }
// 
//    box3.onclick = function () {
//        alert("我是box3");
//    }
// 
//    document.onclick = function () {
//        alert("我是document");
//    }


   box1.addEventListener("click", function () {
       alert("我是box1");
   },true);

   box2.addEventListener("click", function () {
       alert("我是box2");
   },true);

   box3.addEventListener("click", function () {
       alert("我是box3");
   },true);

   document.addEventListener("click", function () {
       alert("我是document");
   },true);

box1.addEventListener("click",function(){
	alert("box1");
},true);
box2.addEventListener("click",function(){
	alert(box2);
},true);
box3.addEventListener("click",function (){
	alert("box3");
},true);
document.addEventListener("click",function(){
	alert("document");
},true);

</script>

</body>
</html>